<template>
  <div class="mbjyxjlBox">
    <!-------------------- 膜包机操作记录 -------------------->
    <TableHeader
      :data="{
        mainTitle: '膜包机操作记录',
        date: '2021年12月12日',
        company: '青岛崂山矿泉水有限公司',
        code: 'LK-QF-LS1-10-012-11-01',
      }"
    />
    <lb-table
      border
      :data="tableData1"
      highlight-current-row
      :showHeader="false"
    >
    </lb-table>
    <TableHeader
      :data="{
        subTitle: '岗 位 自 检 情 况',
      }"
    />
    <RowColTable border :data="tableData3" />
    <!-- <TableHeader
      :data="{
        subTitle: '停 机 及 维 修 记 录',
      }"
    />
    <lb-table
      :column="tableData2.column"
      border
      :data="tableData2.data"
      :merge="['']"
    >
    </lb-table> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: {
        column: [
          {
            prop: "value1",
            label: "产品名称",
            align: "left",
            // fixed: true,
            minWidth: "70%",
            render: (h, scope) => {
              return (
                <div>
                  {scope.row[scope.column.property].name ? (
                    <div style="display: flex;justify-content: space-between">
                      <span>{scope.row[scope.column.property].name}</span>
                      <span>{scope.row[scope.column.property].value}</span>
                    </div>
                  ) : (
                    <span></span>
                  )}
                </div>
              );
            },
          },
          {
            label: "开机时间",
            align: "left",
            minWidth: "30%",
            prop: "value2",
            render: (h, scope) => {
              return (
                <div>
                  {scope.row[scope.column.property].name ? (
                    <div style="display: flex;justify-content: space-between">
                      <span>{scope.row[scope.column.property].name}</span>
                      <span>{scope.row[scope.column.property].value}</span>
                    </div>
                  ) : (
                    <span></span>
                  )}
                </div>
              );
            },
          },
        ],
        data: [],
      },
      tableData2: {
        column: [
          {
            prop: "value",
            label: "停机时间",
            align: "center",
          },
          {
            prop: "value",
            label: "开启时间",
            align: "center",
          },
          {
            label: "停机原因",
            align: "center",
            prop: "value",
          },
          {
            label: "处理措施及效果验证",
            align: "center",
            prop: "value",
          },
        ],
        data: [],
      },
      tableData3: {
        type: [
          { value: "date", label: "检查项目" },
          { value: "date", label: "时间" },
        ],
        column: [
          {
            prop: "value",
            label: "热缩膜使用情况",
          },
          {
            prop: "value",
            label: "塑封质量检查",
          },
          {
            prop: "value",
            label: "缺瓶检查",
          },
          {
            prop: "value",
            label: "瓶码喷印",
          },
          {
            prop: "value",
            label: "彩膜条码",
          },
        ],
        data: [
          {
            date: "2012-12-12",
            value: "111",
          },
        ],
      },
    };
  },
  created() {
    for (let i = 0; i < 4; i++) {
      this.tableData2.data.push({
        value: 1414,
      });
      this.tableData3.data.push({
        date: "2012-12-12",
        value: 2532522,
      });
    }
    let obj = {
      value1: "1111",
      value2: "2222",
      value3: "3333",
      value4: "4444",
      value5: "5555",
      value6: "6666",
    };
    var arr2 = [
      [
        ["产品名称：", ""],
        ["机速：", " 瓶/小时"],
      ],

      [
        ["开机时间：", ""],
        ["温区1实际温度：", " ℃"],
      ],
      [
        ["停机时间：", ""],
        ["温区2实际温度：", " ℃"],
      ],
    ];
    var arr = Object.keys(obj); //arr=["one", "two"]
    var valArr = arr.map(function (i) {
      return obj[i];
    }); //["I am 1", "I am 2"]
    var array = [];
    for (var i = 0; i < valArr.length; i += 2) {
      array.push(valArr.slice(i, i + 2));
    }
    this.tableData1.data = [];
    for (let j in array) {
      var object = new Object();
      object.value1 = new Object();
      object.value2 = new Object();
      object.value1.name = arr2[j][0][0];
      object.value1.value = array[j][0] + arr2[j][0][1];
      object.value2.name = arr2[j][1][0];
      object.value2.value = array[j][1] + arr2[j][1][1];
      this.tableData1.data.push(object);
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          // return [2, 2];
        }
      }
      // if (rowIndex === 0) {
      if (columnIndex <= 0) {
        return [1, 2];
      }
      // }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mbjyxjlBox {
  width: 100%;
  // background: red;
}
</style>>

